<!--
 * @Description: 全局悬浮按钮
 * @Author: ZhangHan
 * @Date: 2025-08-07 14:49:34
 * @LastEditTime: 2025-08-11 10:04:12
 * @LastEditors: ZhangHan
-->
<template>
  <view :class="btnClassName" @click="handleClick">
    <uni-icons :class="getIconClass" type="plusempty" size="26"></uni-icons>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { throttle } from "@/utils/common";

interface FloatBtnProps {
  position: "btRight" | "btLeft";
  func: () => void;
}

const props = defineProps<FloatBtnProps>();
const showRipple = ref(false);

//根据props获取类名 控制展示位置
const btnClassName = computed(() => {
  return ["float-btn", props.position, showRipple.value ? "ripple-effect" : ""];
});

//获取点击效果
const getIconClass = computed(() => {
  return showRipple.value ? ".ripple-effect" : "";
});

// 处理点击事件
const handleClick = throttle(() => {
  props.func();
  showRipple.value = true;
  setTimeout(() => {
    showRipple.value = false;
  }, 1100);
}, 1500);
</script>
<style scoped lang="scss">
.float-btn {
  position: fixed;
  z-index: 9999;
  bottom: 128rpx;
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff; /* 设置白色背景 */
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.8); /* 添加灰色阴影 */
}

.btRight {
  right: 32rpx;
}

.btLeft {
  left: 32rpx;
}

.ripple-effect {
  animation: ripple 0.5s linear;
}

@keyframes ripple {
  to {
    transform: rotate(180deg);
  }
}
</style>
